<template>
    <div class="head_info">
        <div class="head_title" v-if="is_admin">
            <p style="margin-left: 0">总管理员</p>
        </div>
        <div class="head_title" v-else>
            <img :src="info.logo" />
            <p>{{info.company_name}}</p>
        </div>
        <div class="user">
            <span>欢迎,<span>{{info.user_name}}</span></span>
            <span @click="drop_out">退出</span>
        </div>
    </div>
    <breadcrumb></breadcrumb>
</template>

<script lang="js">
import { defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import breadcrumb from './breadcrumb.vue'
export default defineComponent({
    setup() {
        const router = useRouter()
        let state = reactive({
            info: {
                manage_id: 0,
                logo: '',
                company_name: ''
            },
            is_admin: false
        })

        if(sessionStorage.user_info && JSON.parse(sessionStorage.user_info).type == 1) {
            state.is_admin = true
        }
        if(sessionStorage.user_info) {
            state.info = JSON.parse(sessionStorage.user_info)
            state.info.logo = sessionStorage.logo
            state.info.company_name = sessionStorage.company_name
        }

        const drop_out = () => {
            router.push({path: '/login'})
        }

        return {
            ...toRefs(state),
            drop_out
        }
    },
    components: {
        breadcrumb
    }
})
</script>

<style lang="scss" scoped>
.head_info{
    margin-top: 10px;
    margin: 10px 0 20px;
    display: flex;
    justify-content: space-between;
    .head_title{
        display: flex;
        img{
            width: 60px;
        }
        p{
            align-self: center;
            margin-left: 10px;
            font-weight: bold;
            font-size: 24px;
        }
    }
    .user{
        span{
            margin-right: 35px;
            span{
                color: #db6f73;
            }
            &:last-child{
                cursor: pointer;
                margin-right: 0;
            }
        }
    }
}
</style>